<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta charset="utf-8" >
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<link rel="stylesheet" type="text/css" href="../js/layui/css/layui.css">

    <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
    <script src="../js/layui/layui.js"></script>
    <script src="../js/vue.min.js"></script>
    <!-- 引入样式 -->
	<link rel="stylesheet" href="../css/elementui.min.css">
	<!-- 引入组件库 -->
	<script src="../js/elementui.min.js"></script>
    <!-- 引入右键菜单插件 -->
   	<script src="../js/mouseRightMenu/mouseRightMenu.js"></script>
   	<style>
   		*{
			margin:0px;
			padding:0px;
		}
		html,body{
			width:100%;
			height:100%;
		}
		#app{
			width:100%;
			height:100%;
		}
		#app-top{
			width:100%;
			height:50px;
			background:#323232;
		}
		#app-top .title{
			color:white;
			font-size:18px;
			margin-left:10px;
			line-height:50px;
			width:200px;
			float:left;
		}
		#app-bottom .app-left{
			height:100%;
		}
		#app-bottom .app-right{
			height:100%;
			border-left:1px solid black;
		}
		
		.layer-skin-mouse-right-menu .layui-layer-content {
			overflow-x: hidden !important;
		}
		
		.layer-skin-mouse-right-menu{
			border-radius: 5px !important;
			width:50px;
		}
		
		.mouse-right-menu {
			padding: 5px 0;
		}
		
		.mouse-right-menu .enian_menu .text {
			width: 100%;
			margin-left: 10px;
			line-height: 40px;
		}
		
		.mouse-right-menu .enian_menu {
			width: 100%;
			height: 40px;
			border-bottom: 1px solid #eee;
		}
		.mouse-right-menu .enian_menu:last-child{ 
			border-bottom:none;
		}
		.mouse-right-menu .enian_menu:hover {
			cursor: pointer;
			/*background: #009688;*/
			background: #696969;
			color: white;
		}
   	</style>
  </head>
  
  <body>
	<div id="app">
		<div id="app-top"> 
			<div class="title">技师界面编辑器</div>
			<div @click="save()" style="float:right;margin-right:10px;height:30px;line-height:30px;margin-top:10px;" class="layui-btn layui-btn-primary">保存</div>
		</div>
		<div id="app-bottom" style="display:flex;width:100%;" :style="{height:(height - 50)+'px'}">
			<div class="app-left" :style="{width:width*0.8+'px'}">
				<div style="position:absolute;top:70;z-index:-1;" :style="{width:(width*0.8 - 80)+'px',height:(height - 90)+'px',left:40+'px'}">
					<img :src="TVscreenInfo.panel.bg.img" style="width:100%;height:100%;" />
				</div>
				<div class="box" style="width:100%;border:20px solid black;margin:0px auto;overflow:auto;padding:10px;" :style="{height:(height - 110)+'px' , width:(width*0.8 - 100)+'px'}">
					<div @click="edite(index)" class="item" v-for="(item,index) in TVscreenInfo.panel.list" style="width:160px;height:250px;background:white;float:left;cursor:pointer;">
						<div style="width:156px;height:248px;border:2px solid;" :style="{borderColor:item.border}">
							<img :src="item.img" style="width:100%;height:100%;" />
							<div style="width:40px;height:40px;position:relative;top:-248px;right:-116px;background:#f6f6f6;z-index:99;text-align:center;">
								<img @click.stop="del(index)" src="../img/del.png" style="margin-top:4px;" /> 
							</div>
							<div style="width:156px;height:40px;position:relative;top:-80px;right:0;background:#f6f6f6;z-index:99;text-align:center;line-height:40px;">
								{{index == undefined ? "" : TVscreenInfo.panel.list[index].name}}
							</div>
						</div>
					</div>
					<div class="item" @click="add()" style="width:160px;height:250px;background:white;float:left;cursor:pointer;">
						<img src="../img/add.png" style="width:100px;height:100px;margin:60px 30px;" />
					</div>
				</div>
			</div>
				<div class="app-right" :style="{width:(width*0.2 - 1)+'px'}" style="overflow-y:auto;overflow-x:hidden;">
					<div style="width:100%;height:30px;font-size:12px;text-align:left;background:#5f5f5f;color:white;line-height:30px;">背景</div>
					<div style="width:100%;background:grey;height:140px;padding-top:30px;">
						<div style="margin:0px 0px 0px 30px;font-size:12px;color:white;">底图</div>
						<div style="width:100%;margin:15px 0px 0px 50px;display:flex;">
							<div @click="file_select()" style="width:60px;height:25px;line-height:25px;text-align:center;" class="layui-btn layui-btn-primary">更换</div>
							<div @click="bg_del()" style="width:60px;height:25px;line-height:25px;text-align:center;" class="layui-btn layui-btn-primary">删除</div>
						</div>
						<div style="margin:15px 0px 0px 30px;font-size:12px;color:white;display: none">删除</div>
						<div style="width:100%;margin:15px 0px 0px 50px;display:flex;">

						</div>
					</div>
					<div v-if="index != undefined" style="width:100%;background:grey;height:320px;padding-top:30px;">
						
						<div style="width:100%;height:30px;font-size:12px;text-align:left;background:#5f5f5f;color:white;line-height:30px;">技师</div>
						<div style="margin:15px 0px 0px 30px;font-size:12px;color:white;">照片</div>
						<div style="width:100%;margin:20px 0px 0px 50px;display:flex;">
							<div @click="photo" style="width:60px;height:25px;line-height:25px;text-align:center;" class="layui-btn layui-btn-primary">文件</div>
						</div>
						<div style="margin:30px 0px 0px 30px;font-size:12px;color:white;">姓名</div>
						<div style="width:200px;margin:15px 0px 0px 50px;">
							<input placeholder="请输入姓名" v-model="TVscreenInfo.panel.list[index].name" style="width:200px;height:25px;" />
						</div>
						<div style="margin:15px 0px 0px 30px;font-size:12px;color:white;">介绍</div>
						<div style="width:60px;margin:15px 0px 0px 50px;">
							<select v-model="TVscreenInfo.panel.list[index].type" style="height:25px;" class="layui-input" name="city" lay-verify="required">
							  <option value="text">文字</option>
							  <option value="ppt">图片</option>
							</select>  
						</div>
						<div style="width:100%;margin:20px 0px 0px 50px;display:flex;">
							<div @click="edite_desc" style="width:60px;height:25px;line-height:25px;text-align:center;" class="layui-btn layui-btn-primary">编辑</div>
						</div>
					</div>
				</div>
			</div>
			<input id="file" style="display:none;" type="file" onchange="selectFile()" />
			<div id="video_upload" style="display:none;"></div>
			<div id="audio_upload" style="display:none;"></div>
		</div>
	</body>
	<script>
		var item = parent.vue.$data.TVscreenInfo.panel.MAIN.item == undefined ? 0 : parent.vue.$data.TVscreenInfo.panel.MAIN.item ;
		var index = parent.vue.$data.editeEl['content_item'] ;
		var value = parent.vue.$data.TVscreenInfo.panel.MAIN.data[item].data.info[index].technician ;
	
		var vue = new Vue({
			el:"#app" ,
			data:{
				width:document.querySelector("body").offsetWidth ,
				height:document.querySelector("body").offsetHeight ,
				fun:undefined ,
				fun:undefined ,
				canplay:false ,
				index:undefined ,
				TVscreenInfo:{
					panel:{
						bg:{
							img:"" ,
						} ,
						list:[
							
						]
					}
				}
			} ,
			created(){
				if(value != undefined){
					this.TVscreenInfo.panel = value ;
				}
			} ,
			methods:{
				bg_del:function(){
					this.TVscreenInfo.panel.bg.img = "" ;
				} ,
				edite:function(index){
					this.index = index ;
					for(var i=0 ; i<this.TVscreenInfo.panel.list.length ; i++){
						this.TVscreenInfo.panel.list[i].border = "black" ;
					}
					this.TVscreenInfo.panel.list[index].border = "red" ;
				} ,
				add:function(){
					var item = {img:"../img/content.png" , border:"black" , type:"text" , name:"" , desc:"" , ppt:[]}
					this.TVscreenInfo.panel.list.push(item) ;
					// vue更新视图是异步的，下面这个函数表示视图更新完成，更新完视图重新计算item的margin
					this.$nextTick(function () {
				        waterFall() ;
				    })
				} ,
				del:function(index){
					var self = this
					layui.layer.confirm("确认删除当前项" , function(i){
						if(self.TVscreenInfo.panel.list.length == 1){
							self.index = undefined ;
						}
						layui.layer.close(i)
						self.TVscreenInfo.panel.list.splice(index , 1)
						self.$nextTick(function () {
					        waterFall() ;
					    })
					})
				} ,
				file_select:function(){
					var self = this ;
					this.fun = function(base64){
						self.TVscreenInfo.panel.bg.img = base64  ;
					}
					document.getElementById("file").click() ;
				} ,
				edite_desc:function(){
					var self = this ;
					if(this.TVscreenInfo.panel.list[this.index].type == "text"){
						layer.open({
						  title: '技师介绍'
						  ,area:[vue.$data.width*0.6 , vue.$data.height*0.6]
						  ,content: '<textarea onchange="textChange(this)" style="width:100%;height:100%;">'+self.TVscreenInfo.panel.list[self.index].desc+'</textarea>'
						}); 		
					}else{
						layui.use('layer', function(){
						  var layer = layui.layer;
						  
						  layer.open({
							  type: 2,
							  shade: false,
							  area: [vue.$data.width - 200 , vue.$data.height - 200],
							  maxmin: true,
							  content: './goSubPage?type=technician',
							  zIndex: layer.zIndex, //重点1
							  success: function(layero){
							    layer.setTop(layero); //重点2
							  }
							});
						}); 
					}
				} ,
				save:function(){
					// 检查数据是否填写完整
					for(var i = 0 ; i < this.TVscreenInfo.panel.list.length ; i++){
						if(this.TVscreenInfo.panel.list[i].ppt.length == 0 && this.TVscreenInfo.panel.list[i].desc == ""){
							layui.use('layer', function(){
							  var layer = layui.layer;
							  
							  layer.msg("第"+(i+1)+"项的简介没有填写") ;
							}) ;
							return ;
						}
						if(this.TVscreenInfo.panel.list[i].name == undefined || this.TVscreenInfo.panel.list[i].name == ""){
							layui.use('layer', function(){
							  var layer = layui.layer;
							  
							  layer.msg("第"+(i+1)+"项的姓名没有填写") ;
							}) ;
							return ;
						}
					}
					parent.vue.$data.TVscreenInfo.panel.MAIN.data[item].data.info[index].technician = this.TVscreenInfo.panel ;
					layui.use('layer', function(){
					  var layer = layui.layer;
					  
					  layer.msg('保存成功');
					});	
				} ,
				photo:function(){
					var self = this ;
					this.fun = function(base64){
						self.TVscreenInfo.panel.list[self.index].img = base64  ;
					}
					document.getElementById("file").click() ;
				}
			}
		}) ;
		
		function textChange(obj){
			vue.$data.TVscreenInfo.panel.list[vue.$data.index].desc = obj.value ;
		}
		
		//文件操作事件
		function selectFile(e){
			event = event ? event : window.event; 
			if(event.target.files[0] == undefined){
				return ;
			}
			var r = new FileReader();
			var id = layer.load(1); //风格1的加载
			r.readAsDataURL(event.target.files[0]);		
			var base64 = "";
			var size = event.target.files[0].size ;
			var currentSize = 0 ;
			if(!event.target.files[0].type.startsWith("image")){
				layer.alert("此处只能选择图片") ;
				layer.close(id) ;
				return
			}
			r.onload = function(e) {
				base64 = e.target.result;
				currentSize += (e.target.result.substr(e.target.result.indexOf(",") + 1)).length*0.75 ;
				if(currentSize >= size){
					vue.$data.fun(base64) ;
					layer.close(id) ;
				}
			}
		}
		
		function waterFall() {
			console.log("计算瀑布流的margin") ;
	        var width = document.querySelector("body").offsetWidth*0.8 - 160 - 10 ;
	        console.log(width) ;
	        var count = 6 ;
	        var itemWidth = document.querySelectorAll(".item")[0].offsetWidth ;
	        if(width - count*itemWidth < 0){
	        	count = Math.ceil(width / itemWidth) ;
	        	count = count - 1 ;
	        }
	        var len = document.querySelectorAll(".item").length ;
	        var space = (width - itemWidth*count) / ( count - 1 ) ;
	        console.log(count) ;
	        for(var i = 0 ; i < len ; i++){
	        	document.querySelectorAll(".item")[i].style.marginTop = 0 ;
	        	if(i % count == 0){
	        		document.querySelectorAll(".item")[i].style.marginLeft = 0 ;
	        	}else{
	        		document.querySelectorAll(".item")[i].style.marginLeft = space ;
	        	}
	        	if(i / count >= 1){
	        		document.querySelectorAll(".item")[i].style.marginTop = 20 ;
	        	}
	        }
	  		
	    }
	    // 页面尺寸改变时实时触发
	    window.onresize = function() {
	        //重新定义瀑布流
	        vue.$data.width = document.querySelector("body").offsetWidth ;
			vue.$data.height = document.querySelector("body").offsetHeight ;
	        waterFall();
	    };
	    //初始化
	    window.onload = function(){
	        //实现瀑布流
	        waterFall();
	    }
	</script>
</html>
